<template>
  <el-button type="success" icon="ele-Promotion" @click="dialogValue = true" :disabled="disabled">{{ title
    }}</el-button>
  <el-dialog v-model="dialogValue" :title="title" draggable :close-on-click-modal="false" append-to-body>
    <MkDescription>
      <MkDescriptionItem type="danger" label="用血类型" size="large"> 紧急用血 </MkDescriptionItem>
      <MkDescriptionItem label="历史复核血型" size="large"> O+ </MkDescriptionItem>
      <MkDescriptionItem label="Rh分型" size="large"> CcEe </MkDescriptionItem>
      <MkDescriptionItem label="抗筛" size="large"> - </MkDescriptionItem>
      <MkDescriptionItem label="输血史" size="large"> {{ traShenQingHuanZhe.shuXueShi }}
      </MkDescriptionItem>
      <MkDescriptionItem label="输血反应史" size="large"> {{ traShenQingHuanZhe.shuXueFanYingShi }}
      </MkDescriptionItem>
      <MkDescriptionItem label="移植史" size="large"> {{ traShenQingHuanZhe.yiZhiShi }}
      </MkDescriptionItem>
      <MkDescriptionItem label="孕产史" size="large"> {{ traShenQingHuanZhe.yunChanShi }}
      </MkDescriptionItem>
    </MkDescription>
    <div class="page-main" style="display: flex; width: 100%; margin-top: 20px; height: 420px; overflow: auto;">
      <section class="left-panel" style="width: 50%; padding-right: 20px;">
        <el-collapse v-model="leftActiveCollapse">
          <el-collapse-item title="输血指征" name="1" icon="">
            <template #title="{ isActive }">
              输血指征
              <el-text style="margin-left: 10px;" size="large" type="success" v-if="isActive">合理</el-text>
              <el-text style="margin-left: 10px;" size="large" type="danger" v-else>不合理</el-text>
            </template>
            <div style="text-align: center; padding-bottom: 10px;">
              <el-text size="default">
                估计血容量急性丢失>25%
              </el-text>
            </div>
            <MkForm>
              <MkInput label="其他补充说明" type="textarea"> </MkInput>
              <MkInput label="输血合理性评价"> </MkInput>
            </MkForm>

          </el-collapse-item>
          <el-collapse-item title="输血处方" name="2" icon="">
            <div>
              申请成分： 洗涤红细胞 O+ 2u
            </div>
            <div>
              申请成分2： 洗涤红细胞 A+ 2u <span style="color: #E8A94B;"> (非同型输注)</span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </section>
      <!-- 使用 flex 布局和 align-self: stretch 确保分割线占满高度 -->
      <section class="divideBox" style="width: 1px; background-color: #ccc; align-self: stretch;"></section>
      <section class="right-panel" style="flex: 1; padding-left: 20px; display: flex; flex-direction: column;">
        <el-collapse v-model="rightActiveCollapse" style="flex: 1; margin-bottom: 20px;">
          <el-collapse-item icon="ele-CaretRight">
            <template #icon="{ isActive }">
              操作记录
              <span class="icon-ele">
                <el-icon v-if="isActive"><ele-CaretBottom /></el-icon>
                <el-icon v-else><ele-CaretRight /></el-icon>
              </span>
            </template>
            <template #title>
              <div>当前状态： 待上级审核</div>
            </template>
            <div style="max-height: 180px; overflow-y: auto;">
              <ol>
                <li>2025-05-21 08:49:39, 由 医生2 创建。</li>
                <li>2025-05-21 10:10:22, 由 护士1 打印标本。</li>
                <li>2025-05-21 10:12:24, 由 护士2 采集标本。</li>
                <li>2025-05-21 10:28:12, 由 护工1 送出标本。</li>
                <li>2025-05-22 14:57:45, 由 护工1 送达标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
                <li>2025-05-29 19:31:34, 由 护士5 接收标本。</li>
              </ol>
            </div>
          </el-collapse-item>
        </el-collapse>
        <MkForm style="margin-top: auto;">
          <MkSelectUser label="审核人" v-model="ctx.shenHeRenId" />
          <MkSelect label="审核意见" :options="shenHeYiJianOptions" v-model="ctx.shenHeYiJian" />
          <MkSelect label="审核信息" :options="shenHeXinXiOptions" type="textarea" v-model="ctx.shenHeXinXi" />
        </MkForm>
      </section>
    </div>
    <template #footer>
      <el-button size="default" @click="dialogValue = false">取 消</el-button>
      <el-button size="default" type="primary" @click="audit">审 核</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { TraShenQingHuanZheInput } from '/@/api/tra/TraShenQing';
import useVeriftyPwd from '/@/hooks/useVeriftyPwd';

const props = defineProps({
  title: {
    type: String,
    required: true,
    default: '上级医生审核' // 默认不显示标题栏
  },
  disabled: {
    type: Boolean,
    default: true
  },
  traShenQingHuanZhe: {
    type: Object as PropType<TraShenQingHuanZheInput>,
    default: () => ({})
  },
  shenHeYiJianOptions: { // 审核意见选项
    type: Array as PropType<string[]>, // 定义为字符串数组类型
    default: () => ['审核'] // 默认选项数组
  },
  shenHeXinXiOptions: { // 审核信息选项
    type: Array as PropType<string[]>, // 定义为字符串数组类型
    default: () => ['同意', '同意，视手术及库存情况发放'] // 默认选项数组
  },
});
const dialogValue = ref(false); // 上级医生审核
const leftActiveCollapse = ref(['1', '2']); // 左侧折叠面板
const rightActiveCollapse = ref([]); // 右侧折叠面板
const initState = () => {
  return {
    shenHeRenId: undefined, // 审核人ID
    shenHeYiJian: '', // 审核意见
    shenHeXinXi: '' // 审核信息
  }
}
const ctx = reactive(initState());

const emits = defineEmits(['audit']);

const audit = () => {
  useVeriftyPwd({ title: props.title, entityId: props.traShenQingHuanZhe.id }, ctx.shenHeRenId).then(userInfo => {
    emits('audit', { ...ctx, shenHeRen: userInfo.realName }); // 触发父组件的事件
    dialogValue.value = false; // 关闭对话框
  })

};
</script>

<style lang='scss' scoped></style>